<!DOCTYPE html>
<html lang="en" class="app">
<head>
  <meta charset="utf-8" />
  <title>作业集锦首页</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 
 <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
  <link rel="stylesheet" type="text/css" href="css/animate.css" />
  <link rel="stylesheet" type="text/css" href="css/app.css" />
  <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
  <link rel="stylesheet" type="text/css" href="css/simple-line-icons.css" />
  <link rel="stylesheet" type="text/css" href="js/jPlayer/jplayer.flat.css" />
  <link rel="stylesheet" type="text/css" href="css/beforeafter-content.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/beforeafter-settings.css" media="screen" />

<script src="http://www.jq22.com/jquery/jquery-1.8.2.js"></script>
  <script type="text/javascript" src="js/freshline/jquery.freshline.beforeafter.js"></script>
  <script type="text/javascript" src="js/freshline/animadrag.js"></script>
  <!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
  <![endif]-->
</head>

<body>
  <section class="vbox">
    <header class="bg-black lter header header-md navbar navbar-fixed-top-xs">
      <ul class="nav navbar-nav hidden-xs">
        <li>
          <a href="#" class="text-muted">
            <i class="fa fa-indent text"></i>
            <i class="fa fa-dedent text-active"></i>
          </a>
        </li>
      </ul>
      <form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>
            <input type="text" class="form-control input-sm no-border rounded" placeholder="Search songs, albums...">
          </div>
        </div>
      </form>
    </header>

    <section>
      <section class="hbox stretch">
        <section id="content">
          <section class="vbox">
            <section class="w-f-md">
              <section class="hbox stretch bg-black dker">
                <!-- side content -->
                <aside class="col-sm-5 no-padder" id="sidebar">
                  <section class="vbox animated fadeInUp">
                    <section class="scrollable">
                      <div class="m-t-n-xxs item pos-rlt">
                        <div class="top text-right">
                          <span class="musicbar bg-success bg-empty inline m-r-lg m-t" style="width:25px;height:30px">
                        <span class="bar1 a3 lter"></span>
                          <span class="bar2 a5 lt"></span>
                          <span class="bar3 a1 bg"></span>
                          <span class="bar4 a4 dk"></span>
                          <span class="bar5 a2 dker"></span>
                          <span class="bar6 a6"></span>
                          <span class="bar7 a7"></span>
                          </span>
                        </div>
                        <div class="bottom gd bg-info wrapper-lg">
                          <span class="pull-right text-sm">101,400 <br>Followers</span>
                          <span class="h2 font-thin">Soph Ashe</span>
                        </div>
                        <div id="example3" class="beforeafter_slider_3" style="overflow:hidden; width:100%;height:200px">
                          <ul>
                            <li><img src="https://gitee.com/zhuzhengting/2015.jpg" alt="https://zhuzhengting.gitee.io/ninepercent/2015.jpg" />
                              <div id="textbox_13">
                                <div id="logo_13" class="fadeleft"></div>
                              </div>
                              <div id="textbox_13" class="before">
                                <div id="title_13" class="fadeup">点击作业名查看</div>
                              </div>
                              <div id="textbox_13" class="after">
                                <div id="title_13" class="fadeup">Feel Fine!&nbsp;&nbsp;</div>
                              </div>
                              <div id="textbox_13b" class="after">
                                <div id="title_13b" class="fadeup"><i>Make my day</i></div>
                              </div>
                              <div id="textbox_13c" class="after">
                                <div id="title_13c" class="fadeup"><i>kami,my opp</i></div>
                              </div>
                            </li>
                            <li><img src="https://gitee.com/zhuzhengting/2016.jpg" alt="https://gitee.com/zhuzhengting/2016.jpg" />
                              <div id="textbox_code" class="after">
                                <div id="code" class="fadeup"></div>
                              </div>
                              <div id="textbox_green" class="before">
                                <div id="green" class="fadeleft"></div>
                              </div>
                              <div id="textbox_green2" class="after">
                                <div id="green2" class="fade"></div>
                              </div>
                              <div id="textbox_fish">
                                <div id="fish" class="fadedown"></div>
                              </div>
                              <div id="textbox_points" class="after">
                                <div id="points" class="faderight"></div>
                              </div>
                              <div id="textbox_points" class="after">
                                <div id="points" class="faderight"></div>
                              </div>
                              <div id="textbox_points" class="before">
                                <div id="points" class="faderight"></div>
                              </div>
                              <div id="textbox_14c" class="after">
                                <div id="title_14c" class="fadeup">We are</div>
                              </div>
                              <div id="textbox_14a" class="after">
                                <div id="title_14" class="fadeup">freshline</div>
                              </div>
                              <div id="textbox_14b" class="before">
                                <div id="title_14" class="fadeup">fresh</div>
                              </div>
                            </li>                                                 
                          </ul>
                        </div>
                      </div>
                      <ul class=" list-group list-group-lg radius no-border no-bg m-t-n-xxs m-b-none auto" id="latest">
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div id="hoveraudio" class=" clear text-ellipsis">
                            <span><a href="01/first.html">第一次作业</a></span>
                            <span class="text-muted"> -- 1个</span>
                          </div>
                          <div class="music-jump"></div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span><a href="02/index.html">第二次作业</a></span>
                            <span class="text-muted"> -- 1个</span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span><a href="03/03.html">第三次作业</a></span>
                            <span class="text-muted"> -- 1个</span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span><a href="04/css.html">第四次作业</a></span>
                            <span class="text-muted"> -- 一个</span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span> <a href="05/05.html">第五次作业</a></span>
                            <span class="text-muted"> -- 一个</span>
                          </div>
                        </li>

                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span><a href="006shouye.html">第六次作业</a></span>
                            <span class="text-muted"> -- 2个</span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span><a href="07shouye.html">第七次作业</a></span>
                            <span class="text-muted"> -- 2个</span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span><a href="08shouye.html">第八次作业</a></span>
                            <span class="text-muted"> -- 2个</span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span><a href="09/index.html">第九次作业</a></span>
                            <span class="text-muted"> --1个</span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span><a href="10shouye.html">第十次作业</a></span>
                            <span class="text-muted"> -- 2个</span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span><a href="6shouye.html">第十一次作业</a></span>
                            <span class="text-muted"> --5个</span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span><a href="12/filter.html">第十二次作业</a></span>
                            <span class="text-muted"> -- 1个</span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span><a href="13shouye.html">第十三次作业</a></span>
                            <span class="text-muted"> --3个</span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span><a href="18/echarts.html">期末作业</a></span>
                            <span class="text-muted"> -- 1个</span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span>这已经是</span>
                            <span class="text-muted"> -- </span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span>第N个版本了</span>
                            <span class="text-muted"> -- </span>
                          </div>
                        </li>
                        <li class="list-group-item">

                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span>心中有网页</span>
                            <span class="text-muted"> -- </span>
                          </div>
                        </li>
                        <li class="list-group-item">
                          <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <div class="clear text-ellipsis">
                            <span>网页就能出现</span>
                            <span class="text-muted"> -</span>
                          </div>
                        </li>
                      </ul>
                    </section>
                  </section>
                </aside>

                <section class="col-sm-4 no-padder bg">
                  <section class="vbox">
                    <section class="scrollable hover">
                      <ul class="list-group list-group-lg no-bg auto m-b-none m-t-n-xxs">

                        <li class="list-group-item clearfix">
                          <a href="#" class="jp-play-fun pull-right m-t-sm m-l text-md">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <a href="#" class="pull-left thumb-sm m-r">
                          <img src="images/m0.jpg" alt="...">
                        </a>
                          <a class="clear" href="#">
                          <span class="block text-ellipsis">剩下的时间我们背诗吧，不是复制的...</span>
                          <small class="text-muted"></small>
                        </a>
                        </li>

                        <li class="list-group-item clearfix">
                          <a href="#" class="jp-play-fun pull-right m-t-sm m-l text-md">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <a href="#" class="pull-left thumb-sm m-r">
                          <img src="images/a1.png" alt="...">
                        </a>
                          <a class="clear" href="#">
                          <span class="block text-ellipsis">噫吁嚱！危乎高哉！蜀道之难</span>
                          <small class="text-muted"></small>
                        </a>
                        </li>
                        <li class="list-group-item clearfix">
                          <a href="#" class="jp-play-fun pull-right m-t-sm m-l text-md">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <a href="#" class="pull-left thumb-sm m-r">
                          <img src="images/a2.png" alt="...">
                        </a>
                          <a class="clear" href="#">
                          <span class="block text-ellipsis">难于上青天</span>
                          <small class="text-muted"></small>
                        </a>
                        </li>
                        <li class="list-group-item clearfix">
                          <a href="#" class="jp-play-fun pull-right m-t-sm m-l text-md">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <a href="#" class="pull-left thumb-sm m-r">
                          <img src="images/logo/portrait.png" alt="...">
                        </a>
                          <a class="clear" href="#">
                          <span class="block text-ellipsis">蚕丛及鱼凫</span>
                          <small class="text-muted"></small>
                        </a>
                        </li>
                        <li class="list-group-item clearfix">
                          <a href="#" class="jp-play-fun pull-right m-t-sm m-l text-md">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <a href="#" class="pull-left thumb-sm m-r">
                          <img src="images/a4.png" alt="...">
                        </a>
                          <a class="clear" href="#">
                          <span class="block text-ellipsis">开国何茫然</span>
                          <small class="text-muted"></small>
                        </a>
                        </li>
                        <li class="list-group-item clearfix">
                          <a href="#" class="jp-play-fun pull-right m-t-sm m-l text-md">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <a href="#" class="pull-left thumb-sm m-r">
                          <img src="images/a5.png" alt="...">
                        </a>
                          <a class="clear" href="#">
                          <span class="block text-ellipsis">尔来四万八千岁</span>
                          <small class="text-muted"></small>
                        </a>
                        </li>
                        <li class="list-group-item clearfix">
                          <a href="#" class="jp-play-fun pull-right m-t-sm m-l text-md">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <a href="#" class="pull-left thumb-sm m-r">
                          <img src="images/a6.png" alt="...">
                        </a>
                          <a class="clear" href="#">
                          <span class="block text-ellipsis">不与秦塞通人烟</span>
                          <small class="text-muted"></small>
                        </a>
                        </li>
                        <li class="list-group-item clearfix">
                          <a href="#" class="jp-play-fun pull-right m-t-sm m-l text-md">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <a href="#" class="pull-left thumb-sm m-r">
                          <img src="images/a7.png" alt="...">
                        </a>
                          <a class="clear" href="#">
                          <span class="block text-ellipsis">黄鹤之飞尚不得过</span>
                          <small class="text-muted"></small>
                        </a>
                        </li>
                        <li class="list-group-item clearfix">
                          <a href="#" class="jp-play-fun pull-right m-t-sm m-l text-md">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <a href="#" class="pull-left thumb-sm m-r">
                          <img src="images/a8.png" alt="...">
                        </a>
                          <a class="clear" href="#">
                          <span class="block text-ellipsis">猿猱欲度愁攀援</span>
                          <small class="text-muted"></small>
                        </a>
                        </li>
                        <li class="list-group-item clearfix">
                          <a href="#" class="jp-play-fun pull-right m-t-sm m-l text-md">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <a href="#" class="pull-left thumb-sm m-r">
                          <img src="images/a9.png" alt="...">
                        </a>
                          <a class="clear" href="#">
                          <span class="block text-ellipsis">青泥何盘盘</span>
                          <small class="text-muted"></small>
                        </a>
                        </li>
                        <li class="list-group-item clearfix">
                          <a href="#" class="jp-play-fun pull-right m-t-sm m-l text-md">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <a href="#" class="pull-left thumb-sm m-r">
                          <img src="images/a12.png" alt="...">
                        </a>
                          <a class="clear" href="#">
                          <span class="block text-ellipsis">百步九折萦岩峦</span>
                          <small class="text-muted"></small>
                        </a>
                        </li>
                        <li class="list-group-item clearfix">
                          <a href="#" class="jp-play-fun pull-right m-t-sm m-l text-md">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                          <a href="#" class="pull-left thumb-sm m-r">
                          <img src="images/a0.png" alt="...">
                        </a>
                          <a class="clear" href="#">
                          <span class="block text-ellipsis">扪参历井仰胁息</span>
                          <small class="text-muted"></small>
                        </a>
                        </li>
                      </ul>
                    </section>
                  </section>
                </section>
                <section class="col-sm-3 no-padder lt">
                  <section class="vbox">
                    <section class="scrollable hover">
                      <div class="m-t-n-xxs">
                        <div class="item pos-rlt">
                          <a href="#" class="item-overlay active opacity wrapper-md font-xs">
                          <span class="block h3 font-bold text-info">以手抚膺坐长叹</span>
                          <span class="text-muted">但见悲鸟号古木</span>
                          <span class="bottom wrapper-md block"> <i class="icon-arrow-right i-lg pull-right"></i></span>
                        </a>
                          <a href="#">
                          <img class="img-full" src="images/314601.jpg" alt="...">
                        </a>
                        </div>
                        <div class="item pos-rlt">
                          <a href="#" class="item-overlay active opacity wrapper-md font-xs text-right">
                          <span class="block h3 font-bold text-warning text-u-c">雄飞雌从绕林间</span>
                          <span class="text-muted">又闻子规啼夜月，愁空山</span>
                          <span class="bottom wrapper-md block"><i class="icon-arrow-right i-lg pull-left"></i> </span>
                        </a>
                          <a href="#">
                          <img class="img-full" src="images/316718.jpg" alt="...">
                        </a>
                        </div>
                        <div class="item pos-rlt">
                          <a href="#" class="item-overlay active opacity wrapper-md font-xs">
                          <span class="block h3 font-bold text-success text-u-c">蜀道之难</span>
                          <span class="text-muted">难于上青天，使人听此凋朱颜</span>
                          <span class="bottom wrapper-md block"> <i class="icon-arrow-right i-lg pull-right"></i></span>
                        </a>
                          <a href="#">
                          <img class="img-full" src="images/317839.jpg" alt="...">
                        </a>
                        </div>
                        <div class="item pos-rlt">
                          <a href="#" class="item-overlay active opacity wrapper-md font-xs text-right">
                          <span class="block h3 font-bold text-white text-u-c">蜀道之难</span>
                          <span class="text-muted">难于上青天</span>
                          <span class="bottom wrapper-md block"><i class="icon-arrow-right i-lg pull-left"></i> </span>
                        </a>
                          <a href="#">
                          <img class="img-full" src="images/318897.jpg" alt="...">
                        </a>
                        </div>
                        <div class="item pos-rlt">
                          <a href="#" class="item-overlay active opacity wrapper-md font-xs">
                          <span class="block h3 font-bold text-danger-lter text-u-c">侧身西望常咨嗟！</span>
                          <span class="text-muted">BY：李白《蜀道难》</span>
                          <span class="bottom wrapper-md block"> <i class="icon-arrow-right i-lg pull-right"></i></span>
                        </a>
                          <a href="#">
                          <img class="img-full" src="images/318334.jpg" alt="...">
                        </a>
                        </div>
                      </div>
                    </section>
                  </section>
                </section>
              </section>
            </section>
            <footer class="footer bg-success dker">
              <div id="jp_container_N">
                <div class="jp-type-playlist">
                  <div id="jplayer_N" class="jp-jplayer hide"></div>
                  <div class="jp-gui">
                    <div class="jp-video-play hide">
                      <a class="jp-video-play-icon">play</a>
                    </div>
                    <div class="jp-interface">
                      <div class="jp-controls">
                        <div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a></div>
                        <div>
                          <a class="jp-play"><i class="icon-control-play i-2x"></i></a>
                          <a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
                        </div>
                        <div><a class="jp-next"><i class="icon-control-forward i-lg"></i></a></div>
                        <div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a></div>
                        <div>
                          <a class="" data-toggle="dropdown" data-target="#playlist">
                            <i class="icon-playlist"></i></a>
                        </div>
                        <div><img id="poster-ty" class="poster-img" src="images/a10.png"></div>
                        <div class="jp-progress hidden-xs">
                          <div class="jp-seek-bar dk">
                            <div class="jp-play-bar bg">

                            </div>
                            <div class="jp-title text-lt">
                              <ul>
                                <li></li>
                              </ul>
                            </div>
                          </div>
                        </div>
                        <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
                        <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
                        <div class="hidden-xs hidden-sm">
                          <a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
                          <a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
                        </div>
                        <div class="hidden-xs hidden-sm jp-volume">
                          <div class="jp-volume-bar dk volume-bor">
                            <div class="jp-volume-bar-value lter "></div>
                          </div>
                        </div>
                        <div>
                          <a class="jp-shuffle" title="shuffle"><i class="icon-shuffle text-muted"></i></a>
                          <a class="jp-shuffle-off hid" title="shuffle off"><i class="icon-shuffle text-lt"></i></a>
                        </div>
                        <div>
                          <a class="jp-repeat" title="repeat"><i class="icon-loop text-muted"></i></a>
                          <a class="jp-repeat-off hid" title="repeat off"><i class="icon-loop text-lt"></i></a>
                        </div>
                        <div class="hide">
                          <a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
                          <a class="jp-restore-screen" title="restore screen"><i class="fa fa-compress text-lt"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="jp-playlist dropup" id="playlist">
                    <ul class="dropdown-menu aside-xl dker">
                      <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                      <li class="list-group-item"></li>
                    </ul>
                  </div>
                  <div class="jp-no-solution hide">
                    <span>Update Required</span> To play the media you will need to either update your browser to a recent
                    version or update your  Flash plugin .
                  </div>
                </div>
              </div>
            </footer>

          </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
        </section>
      </section>
    </section>
  </section>

  <script src="js/bootstrap.js"></script>
  <script type="text/javascript" src="js/example.js"></script>
  <script src="js/app.js"></script>
  <script src="js/app.plugin.js"></script>
  <script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="js/jPlayer/demo.js"></script>
</body>
</html>